<template>
    <a-modal
        title="设备日志上传"
        v-model:visible="sVisible"
        width="900px"
        :footer="null"
        @update:visible="onVisibleChange">
        <div class="device-log-upload-wrap">
            <div class="page-action-row">
                <a-button type="primary" :disabled="deviceLogUploadBtnDisabled" @click="uploadDeviceLog">上传日志
                </a-button>
            </div>
            <div class="device-log-list">
                <div class="log-list-item">
                    <a-table :columns="airportLogColumns"
                             :scroll="{ x: '100%', y: 600 }"
                             :data-source="airportTableLogState.logList?.list"
                             :loading="airportTableLogState.tableLoading"
                             :row-selection="airportTableLogState.rowSelection"
                             rowKey="boot_index"
                             :pagination="false">
                        <template #log_time="{record}">
                            <div>{{ getLogTime(record) }}</div>
                        </template>
                        <template #size="{record}">
                            <div>{{ getLogSize(record.size) }}</div>
                        </template>
                    </a-table>
                </div>
                <div class="log-list-item">
                    <a-table :columns="droneLogColumns"
                             :scroll="{ x: '100%', y: 600 }"
                             :data-source="droneTableLogState.logList?.list"
                             :loading="droneTableLogState.tableLoading"
                             :row-selection="droneTableLogState.rowSelection"
                             rowKey="boot_index"
                             :pagination="false">
                        <template #log_time="{record}">
                            <div>{{ getLogTime(record) }}</div>
                        </template>
                        <template #size="{record}">
                            <div>{{ getLogSize(record.size) }}</div>
                        </template>
                    </a-table>
                </div>
            </div>
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
import { watchEffect, reactive, ref, computed } from 'vue'
import { ColumnProps } from 'ant-design-vue/lib/table/interface'
import { Device, DOMAIN } from '/@/types/device'
import {
    getDeviceLogList,
    postDeviceUpgrade,
    DeviceLogFileInfo,
    UploadDeviceLogBody
} from '/@/api/device-log'
import { message } from 'ant-design-vue'
import { useDeviceLogUploadDetail } from './use-device-log-upload-detail'

const props = defineProps<{
    visible: boolean,
    device: null | Device,
}>()
const emit = defineEmits(['update:visible', 'upload-log-ok'])

const sVisible = ref(false)

watchEffect(() => {
    sVisible.value = props.visible
    // 显示弹框时，获取设备日志信息
    if (props.visible) {
        getDeviceLogInfo()
    }
})

function onVisibleChange(sVisible: boolean) {
    setVisible(sVisible)
    if (!sVisible) {
        resetTableLogState()
    }
}

function setVisible(v: boolean, e?: Event) {
    sVisible.value = v
    emit('update:visible', v, e)
}

// 表格
const airportLogColumns: ColumnProps[] = [
    { title: '机场日志', dataIndex: 'time', width: 100, slots: { customRender: 'log_time' } },
    { title: '文件大小', dataIndex: 'size', width: 25, slots: { customRender: 'size' } },
]

const droneLogColumns: ColumnProps[] = [
    { title: '飞行器日志', dataIndex: 'time', width: 100, slots: { customRender: 'log_time' } },
    { title: '文件大小', dataIndex: 'size', width: 25, slots: { customRender: 'size' } },
]

const airportTableLogState = reactive({
    logList: {} as DeviceLogFileInfo,
    tableLoading: false,
    selectRow: [],
    rowSelection: {
        columnWidth: 15,
        selectedRowKeys: [] as number[],
        onChange: (selectedRowKeys: number[], selectedRows: []) => {
            airportTableLogState.rowSelection.selectedRowKeys = selectedRowKeys
            airportTableLogState.selectRow = selectedRows
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
    }
})

function resetTableLogState() {
    airportTableLogState.logList = {} as DeviceLogFileInfo
    airportTableLogState.selectRow = []
    airportTableLogState.tableLoading = false
}

const droneTableLogState = reactive({
    logList: {} as DeviceLogFileInfo,
    tableLoading: false,
    selectRow: [],
    rowSelection: {
        columnWidth: 15,
        selectedRowKeys: [] as number[],
        onChange: (selectedRowKeys: number[], selectedRows: []) => {
            droneTableLogState.rowSelection.selectedRowKeys = selectedRowKeys
            droneTableLogState.selectRow = selectedRows
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
    }
})

const deviceLogUploadBtnDisabled = computed(() => {
    return (airportTableLogState.rowSelection.selectedRowKeys && airportTableLogState.rowSelection.selectedRowKeys.length <= 0) &&
        (droneTableLogState.rowSelection.selectedRowKeys && droneTableLogState.rowSelection.selectedRowKeys.length <= 0)
})

// 获取设备内日志
async function getDeviceLogInfo() {
    airportTableLogState.tableLoading = true
    droneTableLogState.tableLoading = true
    try {
        const { code, data } = await getDeviceLogList({
            device_sn: props.device?.device_sn || '',
            domain: [DOMAIN.DOCK, DOMAIN.DRONE]
        })
        if (code === 0) {
            const { files } = data
            if (files && files.length > 0) {
                files.forEach(file => {
                    if (file.module === DOMAIN.DOCK) {
                        airportTableLogState.logList = file
                    } else if (file.module === DOMAIN.DRONE) {
                        droneTableLogState.logList = file
                    }
                })
            }
        }
    } catch (err) {
    }
    airportTableLogState.tableLoading = false
    droneTableLogState.tableLoading = false
}

// 日志上传
async function uploadDeviceLog() {
    const body = {
        device_sn: props.device?.device_sn || '',
        files: [] as any
    } as UploadDeviceLogBody
    if (airportTableLogState.selectRow && airportTableLogState.selectRow.length > 0) {
        body.files.push({
            list: airportTableLogState.selectRow,
            device_sn: airportTableLogState.logList.device_sn,
            module: airportTableLogState.logList.module
        })
    }
    if (droneTableLogState.selectRow && droneTableLogState.selectRow.length > 0) {
        body.files.push({
            list: droneTableLogState.selectRow,
            device_sn: droneTableLogState.logList.device_sn,
            module: droneTableLogState.logList.module
        })
    }
    const { code } = await postDeviceUpgrade(body)
    if (code === 0) {
        message.success('日志上传任务执行成功')
        emit('upload-log-ok')
        setVisible(false)
    }
}

const { getLogTime, getLogSize } = useDeviceLogUploadDetail()

</script>

<style lang="scss" scoped>
.device-log-upload-wrap {

    .device-log-list {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;

        .log-list-item {
            width: 420px;
        }
    }
}
</style>
